<template>
  <footer id="app-footer">
    <div class="wrap">
      <div class="footer-inner">
        <div class="footer-left">
          <router-link to="/"><img :src="footer.logo" alt="Logo" class="fluid-img"></router-link>
          <h3 class="footer-caption">{{footer.caption}}</h3>
          <p class="footer-add">{{footer.address}}</p>
          <div class="footer-contact">
            <p>Phone {{footer.phone}}</p>
            <p>Email: <a :href="'mailto:'+footer.email">{{footer.email}}</a></p>
          </div>
          <div class="footer-social">
            <a href="javascript:;" v-for="item of footer.social" :key="item.title" :class="item.platform"></a>
          </div>
        </div>
        <div class="footer-bottom">
          <div class="fb-left">
            <a v-for="item of footer.leftMenu" :key="item.title" :href="item.link">
              {{item.title}}
            </a>
          </div>
          <go-top ref="go-top" v-show="false"></go-top>
          <div class="fb-gotop" @click="gotop">Back to top
            <svg xmlns="http://www.w3.org/2000/svg" width="21.805" height="30" viewBox="0 0 21.805 30">
              <g transform="translate(-1650.107 -8933.501)">
                <path d="M763.39-37l-9.8,16h20Z" transform="translate(897.413 8975.001)" fill="none" stroke="#fff" stroke-width="1"></path>
                <rect width="30" height="1" transform="translate(1660.499 8963.501) rotate(-90)" fill="#fff"></rect>
              </g>
            </svg></div>
          <div class="fb-copyright">
            @ 2019 SDAY Shenzhen City of Design Promotion Association <span class="fb-design">Designed by <a href="https://www.sumaarts.com/">sumaart</a></span>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>
<script>
  import GoTop from '@inotom/vue-go-top'
  export default {
    name: 'Footer',
    components: {
      GoTop
    },
    data(){
      return {
        footer: {
          leftMenu: [
            {
              title: 'Terms and Conditions',
              link: '',
            },{
              title: 'Special clause',
              link: '',
            },{
              title: 'NOTES for material arrangement',
              link: '',
            }
          ],
          social: [
            {
              platform: 'icon-facebook',
              link: '',
            },{
              platform: 'icon-weixin',
              link: '',
            },{
              platform: 'icon-weibo',
              link: '',
            },{
              platform: 'icon-douban',
              link: '',
            }
          ],
          email: 'info@sday.design',
          phone: '+ 86 755 83258290',
          address: 'A-509, SDCIC Mansion, 6, Guanglan Road, Futian Free Trade Zone, Futian Shenzhen, China, 518045',
          caption: 'SDAY Secretariat',
          logo: require('@/assets/img/logo_footer.png')
        }
      }
    },
    methods: {
      gotop(event) {
        this.$refs['go-top'].clickHandle(event)
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "~@/assets/scss/iconfont.scss";
  #app-footer {
    background-color: #000;
    padding-top: 80px;
    .wrap {
      margin: 0 40px;
      .footer-inner {
        color: #fff;
        font-size: 14px;
        a {
          color: #fff;
          transition: color 0.25s;
          &:hover {
            color: #888;
          }
        }
        border-top: 1px solid #888;
        .footer-left {
          img {
            margin-top: 50px;
          }
          h3.footer-caption {
            font: 700 18px/40px "Futura";
            letter-spacing: .02em;
            margin-top: 30px;
          }
          .footer-add {
            margin-top: 10px;
          }
          .footer-contact {
            margin-top: 20px;
            line-height: 24px;
          }
          .footer-social {
            margin-top: 30px;
            a {
              display: inline-block;
              vertical-align: top;
              margin-right: 1em;
              font-size: 20px;
              &.icon-facebook:before {content: "\e682"}
              &.icon-weixin:before {content: "\e602"}
              &.icon-weibo:before {content: "\e62c"}
              &.icon-douban:before {content: "\e640"}
            }

          }
        }
        .footer-bottom {
          position: relative;
          padding: 15px 0;
          min-height: 60px;
          border-top: 1px solid #888;
          margin-top: 80px;
          .fb-left {
            a {
              position: relative;
              display: inline-block;
              vertical-align: top;
              font: 300 14px/30px "Futura";
              letter-spacing: .02em;
              &:nth-of-type(n+2) {
                margin-left: 8px;
                padding-left: 9px;
                &::before {
                  content: "";
                  position: absolute;
                  top: 50%;
                  margin-top: -7px;
                  left: 0;
                  width: 1px;
                  height: 14px;
                  background-color: #fff;
                }
              }
              &:hover {
                color: #888;
                text-decoration: underline;
              }
            }
          }
          .fb-gotop {
            position: absolute;
            top: 15px;
            right: 5px;
            padding-right: 30px;
            font: 300 14px/30px "Futura";
            letter-spacing: .02em;
            color: #fff;
            transition: color 0.25s;
            cursor: pointer;
            svg {
              position: absolute;
              top: 0;
              right: 0;
              height: 30px;
            }
            &:hover {
              color: #888;
              svg path {
                fill: #fff;
                transition: all .25s;
              }
            }
          }
          .fb-copyright {
            span.fb-design {
              display: inline-block;
              margin-left: 30px;
            }
          }
        }
      }
    }
  }
</style>
